import React, { useEffect, useState } from 'react';
import { useNavigate } from "react-router-dom";
import TabBar from "../../components/TabBar/TabBar";
import SeachBar from "../../components/SearchBar/SearchBar";
import './index.css';
import Fenlei from "../../components/fenlei/fenlei";
import Banner from "../../components/banner/banner";
import {Card, Layout} from 'antd';
import {getProductList} from "../../services/product";

const { Meta } = Card;
const { Content } = Layout;
const Home = () => {
    const initialTabIndex = 0; // 例如初始化为1
    const navigate = useNavigate();
    const [dataList, setDataList] = useState([]);

    const goToProductDetails = (id) => {
        navigate(`/product/${id}`);
    };

    useEffect(() => {
        fetchProductList();
    }, );

    const fetchProductList = (page, pageSize) => {
        // 获取商品列表示例
        getProductList({ page: 1, pageSize: 10 }).then(response => {
            if (response && response.result) {
                console.log('Product List:', response.result);
                const parsedProductList = response.result;
                // 过滤掉 isRecommend 为 false 的产品
                const filteredProductList = parsedProductList.filter(product => product.isRecommended === true);
                setDataList(filteredProductList);
            } else {
                console.error('Error fetching product list: Invalid response');
            }
        }).catch(error => {
            console.error('Error fetching product list:', error);
        });

    };
    console.log(dataList);


    return (
        <Layout style={{  margin: 'auto', backgroundColor: '#fff' }}>
            <TabBar initialTabIndex={initialTabIndex} />
            <SeachBar />
            <Banner />
            <Fenlei />
            <div className='hot_name'>热卖推荐</div>
            <div className="product_hot">
                {dataList.map((data) => (
                    <div className='details' key={data.id}>
                        <Card
                            cover={<img alt="product_image" src={data.details.length > 0 ? data.details[0] : ''}  className='images' style={{ height: 200 }} onClick={() => goToProductDetails(data.id)} />}
                        >
                            <Meta title={data.productName} description={`Price: ${data.price}`} />
                        </Card>
                    </div>
                ))}

            </div>
            <br/>
            <br/>
            <br/>
            <br/>
        </Layout>

    );
}

export default Home;